<script setup lang="ts">
import { ref } from 'vue'

interface TeamMember {
  id: number
  name: string
  position: string
  avatar: string
  description: string
}

const teamMembers = ref<TeamMember[]>([
  {
    id: 1,
    name: '张三',
    position: '前端开发工程师',
    avatar: 'https://placekitten.com/100/100',
    description: '拥有5年Vue开发经验，热爱开源社区'
  },
  {
    id: 2,
    name: '李四',
    position: '产品经理',
    avatar: 'https://placekitten.com/101/101',
    description: '专注于用户体验设计，追求产品的极致体验'
  },
  {
    id: 3,
    name: '王五',
    position: '后端开发工程师',
    avatar: 'https://placekitten.com/102/102',
    description: '擅长分布式系统设计，热衷技术创新'
  }
])
</script>

<template>
  <div class="page-container about-page">
    <section class="page-header">
      <h1>关于我们</h1>
      <p class="subtitle">致力于为用户提供最好的产品体验</p>
    </section>

    <div class="container">
      <section class="company-intro section">
        <div class="intro-content">
          <div class="intro-text">
            <h2>公司简介</h2>
            <p>我们是一家充满活力的技术公司，专注于开发创新的Web应用解决方案。</p>
            <ul class="company-features">
              <li>
                <span class="feature-icon">🎯</span>
                <span>专注技术创新</span>
              </li>
              <li>
                <span class="feature-icon">👥</span>
                <span>优秀的团队文化</span>
              </li>
              <li>
                <span class="feature-icon">💡</span>
                <span>持续学习成长</span>
              </li>
            </ul>
          </div>
          <div class="intro-image">
          </div>
        </div>
      </section>

      <section class="team-section section">
        <h2>团队成员</h2>
        <div class="team-grid">
          <div v-for="member in teamMembers" 
               :key="member.id" 
               class="team-card">
            <div class="member-avatar">
            </div>
            <div class="member-info">
              <h3>{{ member.name }}</h3>
              <p class="position">{{ member.position }}</p>
              <p class="description">{{ member.description }}</p>
            </div>
            <div class="member-social">
              <a href="#" class="social-link">
                <i class="fab fa-github"></i>
              </a>
              <a href="#" class="social-link">
                <i class="fab fa-linkedin"></i>
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped lang="scss">
.about-page {
  .company-intro {
    .intro-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      
      .intro-text {
        h2 {
          text-align: left;
          margin-bottom: 1.5rem;
        }
        
        p {
          font-size: 1.1rem;
          line-height: 1.6;
          margin-bottom: 2rem;
          color: var(--secondary-color);
        }
      }
      
      .company-features {
        list-style: none;
        padding: 0;
        
        li {
          display: flex;
          align-items: center;
          margin-bottom: 1rem;
          
          .feature-icon {
            font-size: 1.5rem;
            margin-right: 1rem;
          }
        }
      }
      
      .intro-image {
        img {
          width: 100%;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
      }
    }
  }
  
  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    
    .team-card {
      background: var(--bg-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .member-avatar {
        width: 100%;
        height: 200px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .member-info {
        padding: 1.5rem;
        text-align: center;
        
        h3 {
          color: var(--primary-color);
          margin-bottom: 0.5rem;
        }
        
        .position {
          color: var(--secondary-color);
          margin-bottom: 1rem;
          font-weight: 500;
        }
        
        .description {
          color: var(--text-color);
          line-height: 1.5;
        }
      }
      
      .member-social {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding-bottom: 1.5rem;
        
        .social-link {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: var(--primary-color);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: opacity 0.3s;
          
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style> 